.keyboard-group {
  position: relative;
  &.active:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    border-bottom: 1px solid #ffd800;
  }
}

.keyboard {
  overflow: hidden;
  .num-keyboard {
    overflow: hidden;
    text-align: center;
    color: #444;
    .l-con {
      float: left;
      width: 75%;
      ul {
        overflow: hidden;
        padding: 0;
        font-size: 2.4rem;
      }
      li {
        position: relative;
        float: left;
        width: 33.33%;
        height: 60px;
        line-height: 60px;
        &:before {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
          border-top: 1px solid #ebebeb;
          transform: scaleY(0.5);
        }
        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          border-right: 1px solid #ebebeb;
          transform: scaleX(0.5);
        }
        &:active {
          background-color: #f9f9f9;
        }
      }
    }
    .r-con {
      float: right;
      width: 25%;
      ul {
        padding: 0;
        position: relative;
        &:before {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
          border-top: 1px solid #ebebeb;
          transform: scaleY(0.5);
        }
      }
      li {
        width: 100%;
        height: 120px;
        line-height: 120px;
      }
      .ok-btn {
        background-color: #ffd800;
        font-size: 2rem;
      }
    }
    .down-btn i {
      display: inline-block;
      width: 23px;
      height: 13px;
      background-image: url(../../assets/image/common.png);
      background-size: 400px;
      background-position: -277px -408px;
    }
    .clearValue {
      position: relative;
    }
  }
  .clearValue i, .abc-keyboard .setCapsLock i, .num-keyboard .down-btn i {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
  .abc-keyboard {
    padding: 16px 0 8px;
    > div {
      margin-bottom: 6px;
    }
    .keyboard-row {
      ul {
        overflow: hidden;
        padding: 0;
      }
      li {
        float: left;
        padding: 3px;
        height: 48px;
        text-align: center;
        span {
          display: inline-block;
          width: 100%;
          height: 100%;
          background-color: #f5f5f5;
          color: #333;
          font-size: 24px;
          border-radius: 5px;
        }
      }
    }
    .row-1 li {
      width: 10%;
    }
    .row-2 {
      padding: 0 5%;
      li {
        width: 11.11%;
      }
    }
    .row-3 li {
      width: 14.28%;
    }
    .flex-box {
      display: -webkit-box;
      display: -moz-box;
      .flex-con {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
      }
    }
    .setCapsLock, .clearValue {
      position: relative;
      width: 42px;
      height: 42px;
      text-align: center;
      background-color: #f5f5f5;
      color: #333;
      margin: 3px;
      border-radius: 5px;
    }
    .to-123 {
      width: 90px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      background-color: #f5f5f5;
      color: #333;
      margin: 3px;
      border-radius: 5px;
      font-size: 16px;
      color: #333;
    }
    .ok-btn {
      width: 100%;
      height: 42px;
      line-height: 42px;
      text-align: center;
      background-color: #ffd800;
      margin: 3px;
      border-radius: 5px;
      font-size: 16px;
      color: #333;
    }
  }
}
